<template>
  <div class="tpl20-nav">
    <div
      class="modulePadding"
      :style="`padding-top:${tplItemData.modulePadding}px;padding-bottom:${tplItemData.modulePadding}px;`">
      <section class="diy-imgNav20 clearfix">
        <a
          v-for="(item, index) in tplItemData.dataset"
          :key="index"
          @click="openLink(item.link)"
          :class="`imgNav-img img-${index + 1}`">
          <img :src="item.pic" mode="aspectFill">
        </a>
      </section>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
})
</script>

<style lang="scss">
.tpl20-nav{
  .diy-imgNav20{
    position: relative;
    width:100%;
    padding-top: 60%;
    //height:210px;
    .imgNav-img{
      position: absolute;
      width: 30%;
      height:48%;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      &.img-1{
        width:36%;
        height:100%;
        left:0;
        top:0;
      }
      &.img-2{
        left:38%;
        top:0;
      }
      &.img-3{
        left:70%;
        top:0;
      }
      &.img-4{
        width:62%;
        right:0;
        bottom:0;
      }
      img{
        display:block;
        width:100%;
        height:100%;
      }
    }
  }
}
</style>
